<script setup lang="ts">
import {getComponent, getPlaceholder, JFormProps} from "./form.ts";
import NumUtils from "../../utils/NumUtils.ts";

defineOptions({
  name: "JForm",
})
defineExpose()
const emits = defineEmits(['submit']);

const props = withDefaults(defineProps<JFormProps>(), {
  model: {} as any,
  colNum: 2,
  showSubmit: false,
  submitText: "提交",
  labelCol: {span: 6},
  wrapperCol: {span: 18},
})
const submitOffset = NumUtils.sum(props.labelCol.offset, props.labelCol.span)
</script>

<template>
  <a-form v-bind="props">
    <a-row :gutter="[15, 0]">
      <template v-for="item in props.items">
        <a-col :span="(24 / props.colNum)">
          <a-form-item :name="item.name || item.dataIndex" :label="item.label || item.title">
            <component :is="getComponent(item.type)" v-bind="item.props" style="width:100%"
                       v-model:value="props.model[(item.name || item.dataIndex) as string]"
                       :placeholder="getPlaceholder(item)"/>
          </a-form-item>
        </a-col>
      </template>
    </a-row>
    <a-form-item v-if="props.showSubmit" :wrapper-col="{ offset: submitOffset, span: wrapperCol.span }">
      <a-button type="primary" @click="onSubmit">
        {{ props.submitText }}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<style scoped>

</style>